<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modelValue="modelValue"
    @update:model-value="emits('update:modelValue', $event)"
    :title="title"
    width="500">
    <el-form>
      <el-form-item label="组" :label-width="80">
        <el-input v-model="group" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" :label-width="80">
        <el-input v-model="name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="颜色" :label-width="80">
        <common-color-block :color="rgb" />
      </el-form-item>
      <el-form-item label="拾取位置" :label-width="80">
        <div flex items-center flex-1>
          <el-select v-model="recordPosition" value-key="name">
            <el-option
              v-for="(item, index) in gamePoints"
              :key="index" :label="item.name" :value="item.initial"/>
          </el-select>
          <el-button ml2 @click="record()" :icon="ElIconVideoCamera" type="primary" plain>
            {{ rgb.r === 0 && rgb.g === 0 && rgb.b === 0 ? '拾取' : '重新拾取' }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <div flex justify-end>
      
    </div>
    <template #footer>
      <div class="dialog-footer" flex>
        <el-button mr-auto @click="onDelete()" type="danger">删除</el-button>
        <el-button @click="emits('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="confirm()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { MathColor } from '~/models/Math/MathColor';
import { oProject } from '~/models/Project';
import { defaultTaskManager } from '~/models/Task/TaskManager';
import { MathPoint } from '~/models/Math/MathPoint';
import type { VarInit } from "~/models/graph/data/var_init";
import { TypeMathPoint } from '~/models/types';

const gamePoints = computed(() => oProject.value.globals.filter( x => x.type.equal(TypeMathPoint)))

const props = defineProps<{
  modelValue: boolean,
  color: VarInit,
}>()
// const editingPoint = ref(new GamePoint())
const group = ref('')
const name = ref('')
const rgb = ref(new MathColor())
const emits = defineEmits<{
  (e: 'update:modelValue', item: boolean): void
  (e: 'confirm', item: void): void
  (e: 'delete', item: void): void
}>()

watch(() => props.modelValue, val => {
  
  if (val) {
    console.log('update', val);
    const arr = props.color.name.split('.')
    if(arr.length === 1) {
      group.value = ''
      name.value = arr[0]
    }
    else {
      group.value = arr[0]
      name.value = arr[1]
    }
    const inner = props.color.initial
    rgb.value.r = inner.r
    rgb.value.g = inner.g
    rgb.value.b = inner.b
  }
}, {
  immediate: true
})

function confirm() {
  if (name.value === '' || group.value.indexOf('_') >=0 || name.value.indexOf('_') >=0) {
    return
  }
  const _name = group.value === '' ? name.value : `${group.value}_${name.value}`
  props.color.name = _name
  props.color.initial.r = rgb.value.r
  props.color.initial.g = rgb.value.g
  props.color.initial.b = rgb.value.b

  emits('update:modelValue', false)
  emits('confirm')
}

const title = computed(() => {
  return props.color.name === '' ? '新位置' : '编辑位置'
})

function onDelete() {
  emits('update:modelValue', false)
  emits('delete')
}

const recordPosition = ref(null as MathPoint | null)
async function record() {
  const point = recordPosition.value
  if (!point) {
    ElMessage({ type: 'warning', message: '请选择捕捉点' })
    return
  }
  console.log('point', point);
  
  const codePre = `\
target_title = "${oProject.value.gameTitle}"
target_point = {'x': ${point.x}, 'y': ${point.y}}
`
  const code = await loadCode('record_color')
  const colors = await defaultTaskManager.value.exec(codePre + code)
  if (colors.length) {
    rgb.value.r = colors[0].r
    rgb.value.g = colors[0].g
    rgb.value.b = colors[0].b
  }
}
</script>